import { Component, OnInit } from '@angular/core';
import { projectInfo, echartsColor } from './survey.model';
import { SurveyService } from '../../../services/project/survey/survey.service';

declare const BMap: any;

@Component({
  selector: 'app-survey',
  templateUrl: './survey.component.html',
  styleUrls: ['./survey.component.scss']
})
export class SurveyComponent implements OnInit {

  constructor(
    private surveyService: SurveyService,
  ) { }

  public optionsFir: any;
  public optionsSec: any;
  public optionsThi: any;
  public _map: any;
  public address: any;
  public markerHistory: any;
  public projectInfo: any;
  public imgStyle: any = {};
  public echartsInfo: any = [];
  public userLists: any = [];


  /**
   * 初始化
   */
  public async init() {
    // 饼图信息
    this.projectInfo = JSON.parse(window.localStorage.getItem('project'));
    const result = await this.surveyService.getEchartsInfo(JSON.parse(window.localStorage.getItem('project')).id);
    this.echartsInfo = Object.values(result.result);
    console.log(this.echartsInfo);
    this.echarts();
    // 人员信息
    const json = {
      SkipCount: 0,
      maxResultCount: 1000,
      projectId: JSON.parse(window.localStorage.getItem('project')).id
    };
    const resultUser = await this.surveyService.getProjectUsers(json);
    // console.log(resultUser)
    this.userLists = resultUser.result.items;
    this.userLists.forEach(el => {
      if (el.avatar) {
        el.style = {
          'background-image': 'url(' + el.avatar + ')'
        };
      }
    });
  }

  /**
   * 饼图表
   */
  public echarts() {
    this.optionsFir = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },

      color: ['#975fe5', '#02d6dc'],
      series: [
        {
          name: '人员分布',
          type: 'pie',
          radius: '60%',
          center: ['50%', '50%'],
          selectedMode: 'single',
          data: [
            { value: this.echartsInfo[0] ? (this.echartsInfo[0])[0] : 3, name: '项目管理人员' },
            { value: this.echartsInfo[0] ? (this.echartsInfo[0])[1] : 15, name: '作业人员' }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    this.optionsSec = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      color: ['#975fe5', '#3aa1ff'],
      series: [
        {
          name: '质量',
          type: 'pie',
          radius: '60%',
          center: ['50%', '50%'],
          selectedMode: 'single',
          data: [
            { value: this.echartsInfo[1] ? (this.echartsInfo[1])[0] : 0, name: '未完成' },
            { value: this.echartsInfo[1] ? (this.echartsInfo[1])[1] : 0, name: '已完成' }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
          }
        }
      ]
    };
    this.optionsThi = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      color: ['#f2637b', '#36cbcb'],
      series: [
        {
          name: '进度',
          type: 'pie',
          radius: '60%',
          center: ['50%', '50%'],
          selectedMode: 'single',
          data: [
            { value: this.echartsInfo[2] ? (this.echartsInfo[2])[0] : 0, name: '未完成' },
            { value: this.echartsInfo[2] ? (this.echartsInfo[2])[1] : 0, name: '已完成' }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
          }
        }
      ]
    };
  }


  // 百度地图
  public onReady(map: any) {
    this._map = map;
    map.setCurrentCity('重庆'); // 设置地图城
    // 小点样式
    const myIcon = new BMap.Icon('http://api.map.baidu.com/img/markers.png', new BMap.Size(23, 25), {
      offset: new BMap.Size(10, 25),                  // 指定定位位置
      imageOffset: new BMap.Size(0, -275)   // 设置图片偏移
    });
    let point;
    if (this.projectInfo.location) {
      point = new BMap.Point(parseFloat(this.projectInfo.location.split(',')[0]), parseFloat(this.projectInfo.location.split(',')[1]));
      const marker = new BMap.Marker(point, { icon: myIcon });
      this._map.addOverlay(marker); // 添加覆盖物
      this.openInfo(point);   // 提示信息
    } else {
      point = new BMap.Point(106.561317, 29.561393);
    }

    map.centerAndZoom(point, 14); // 设初始地图
    map.enableScrollWheelZoom(true); // 启用滚轮放大缩小
    this.cqCover(); // 建立覆盖区域


    // map.addEventListener('click', this._click.bind(this)); //点击
  }

  public cqCover() {
    const data = '重庆';
    const bdary = new BMap.Boundary();
    bdary.get(data, (res) => {
      // 回调
      // console.log(res.boundaries)
      this.removeBaiduLogo(); // 去掉地图下面百度LOGO标识
    });
  }

  public _click(e: any) {
    console.log(e.point.lng);
    if (this.markerHistory !== undefined) {
      this._map.removeOverlay(this.markerHistory);
    }
    const point = new BMap.Point(e.point.lng, e.point.lat);
    const myIcon = new BMap.Icon('http://api.map.baidu.com/img/markers.png', new BMap.Size(23, 25), {
      offset: new BMap.Size(10, 25),                  // 指定定位位置
      imageOffset: new BMap.Size(0, -275)   // 设置图片偏移
    });
    const marker = new BMap.Marker(point, { icon: myIcon });
    this.markerHistory = marker;
    this._map.addOverlay(marker); // 添加覆盖物
    this.openInfo(point);   // 提示信息
  }

  public openInfo(point) {
    const opts = {
      width: 200,     // 信息窗口宽度
      height: 100,     // 信息窗口高度
      title: '项目位置', // 信息窗口标题
      enableMessage: false// 设置允许信息窗发送短息
    };
    const geoc = new BMap.Geocoder();
    geoc.getLocation(point, (res) => {
      console.log(res);
      const addComp = res.addressComponents;
      const location = addComp.city + addComp.district + addComp.street + addComp.streetNumber;
      const infoWindow = new BMap.InfoWindow(location, opts);  // 创建信息窗口对象
      this._map.openInfoWindow(infoWindow, point); // 开启信息窗口
    });
  }

  private removeBaiduLogo() {
    try {
      const tagQuery: any = document.querySelector('.anchorBL');
      tagQuery.style.display = 'none';
      const spanQuery: any = document.querySelector('.BMap_cpyCtrl.BMap_noprint.anchorBL');
      spanQuery.style.display = 'none';
    } catch (error) { }
  }

  ngOnInit() {
    this.init();
    // this.echarts();
  }

}
